<template>
	<view class="p20">
		<view class="list">
			<view class="item br12" v-for="(item,index) in data" :key="index" @click="jump(`/pages/cats/cats?id=${item.id}&name=${item.name}`)">
				<image :src="item.pic" mode="aspectFill"></image>
				<view class="d-b-c pt15 pb15 pl20 pr20">
					<text class="vertical flex-1 fb f34">{{item.name}}</text>
					<image class="icon" src="https://dd.qfxwl.com/static/images/top.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		name: "dp-protype",
		props: ['data', 'params'],
		data() {
			return {

			};
		},
		methods: {
			jump(url) {
				// console.log(url);
				// return
				app.goto(url)
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		width: 100%;

		.item {
			width: 100%;
			background-color: #f2f2f2;
			overflow: hidden;

			>image {
				width: 100%;
				height: 360rpx;
			}

			.icon {
				width: 30rpx;
			}
		}
	}
</style>